<template>
    <el-table :data="state.data" style="width :100%;" border stripe :scrollbar-always-on="true">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="t1" label="物料名称" class-name="column_date" align="left" />
        <el-table-column prop="t2" label="物料编码" class-name="column_date" align="left" />
        <el-table-column prop="t3" label="仓库" class-name="column_common" align="left" />
        <el-table-column prop="t4" label="库区" align="left" />
        <el-table-column prop="t5" label="可用库存" align="left" />
        <el-table-column prop="t6" label="安全库存" align="left" />
        <el-table-column prop="t7" label="库龄" align="left" />
        <el-table-column prop="t7" label="关联设备数" align="left" />
        <el-table-column prop="t7" label="关联设备数" align="left" />
        <el-table-column class-name="last" label="操作" align="left">
            <template #default="scope: any">
                <span class="btn_1">查看</span>
                <!-- <span class="btn_2">定位</span> -->
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">

let state = reactive({
    data: [
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '给排水系统/给水系统/给水泵', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
        { t1: '锅炉系统', t2: 'xxxx类别2', t3: 'xxx类型1', t4: '管网系统', t5: 'SGw908992', t6: '远程', t7: '是' },
    ]
})

</script>

<style scoped lang="scss">
:deep(.el-table) {
    border: 1px solid #5A7275;
    background-color: transparent;
    --el-table-border-color: transparent;

    .last {
        text-align: center;
        border-left: 1px solid #5A7275;
    }

    th {
        font-size: 12px;
        font-weight: bold;
        color: #9FF5FF;
        line-height: 1;

        border-bottom: 1px solid #5A7275;
    }

    /* 斑马纹颜色 */
    tr {
        font-size: 12px;
        font-weight: 400;
        color: #FFFFFF;
        // background: rgba(11, 26, 50, 0.6) !important;
        background-color: rgba(255, 255, 255, 0.05) !important;

        td {
            border-bottom: 1px solid #5A7275;
        }

        &:last-child {
            td {
                border-bottom: none;

            }
        }

        .el-table__cell {
            // background: rgba(11, 26, 50, 0.6) !important;
            background-color: rgba(255, 255, 255, 0.05) !important;
            border-right: none;
            padding: 0;

            .cell {
                line-height: vh(36);
                height: vh(36);
                padding: 0 vh(10);
                font-size: vh(12);
            }
        }
    }



    /* 非斑马纹颜色 */
    .el-table__row--striped {
        .el-table__cell {
            // background: #2B424A !important;
            background-color: rgba(0, 170, 190, 0.05) !important;
        }

    }
}
</style>
